<template>
    <div>
        <ProvinceAdmitHeader></ProvinceAdmitHeader>
        <div id="content">
            <el-divider content-position="left"><i class="el-icon-data-line"></i> 省分数线</el-divider>

            <div class="province">

                <div class="provinceCondition">
                    <el-divider content-position="left"><i class="el-icon-search"></i> 各省分数线查询</el-divider>
                    <!-- 查询表单   -->
                    <div class="provinceConditionFrom">
                        <el-row>
                            <el-col :span="18">
                                <el-form :model="provinceConditionFrom">
                                    <el-form-item prop="province">
                                        <span>所在省份 ></span>
                                        <span>
                                <el-select v-model="provinceConditionFrom.province" placeholder="省份" >
                                    <el-option v-for="province in provinces" :value=province>{{province}}</el-option>
                                </el-select>
                                </span>
                                    </el-form-item>
                                    <el-form-item prop="examType" >
                                        <span>考试类型 ></span>
                                        <span>
                                    <el-radio-group v-model="provinceConditionFrom.examType">
                                        <el-radio label="全部"></el-radio>
                                        <el-radio label="理科"></el-radio>
                                        <el-radio label="文科"></el-radio>
                                        <el-radio label="综合"></el-radio>
                                    </el-radio-group>
                                </span>
                                    </el-form-item>
                                    <el-form-item prop="year" >
                                        <span>录取年份 ></span>
                                        <span>
                                    <el-radio-group v-model="provinceConditionFrom.year">
                                        <el-radio label="全部"></el-radio>
                                        <el-radio label="2020"></el-radio>
                                        <el-radio label="2019"></el-radio>
                                        <el-radio label="2018"></el-radio>
                                        <el-radio label="2017"></el-radio>
                                        <el-radio label="2016"></el-radio>
                                        <el-radio label="2015"></el-radio>
                                        <el-radio label="2014"></el-radio>
                                    </el-radio-group>
                                </span>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="6">
                                <el-button class="searchBtn" @click="searchProvinceAdmit(1)">查 询 分数线</el-button>
                            </el-col>
                        </el-row>

                    </div>
                </div>

                <div class="provinceAdmitList" v-show="provinceAdmitResultList.length != 0">
                    <el-divider content-position="left"><i class="el-icon-finished"></i> 查询结果</el-divider>
                    <div style="margin:50px">
                        <span >共查询了{{total}}条数据,当前第{{currentPage}}页</span><br/>

                    </div>
                    <div class="provinceAdmitResultList" >
                        <el-table :data="provinceAdmitResultList" stripe style="width: 100%;margin: 50px">
                            <el-table-column type="index" label="序号" width="100"></el-table-column>
                            <el-table-column prop="province" label="所在省份" width="180"></el-table-column>
                            <el-table-column prop="year" label="录取年份" width="180"></el-table-column>
                            <el-table-column prop="examType" label="考试类型" width="180"></el-table-column>
                            <el-table-column prop="admitBatch" label="录取批次" width="200"></el-table-column>
                            <el-table-column prop="scoreLine" label="录取分数线" width="200"></el-table-column>
                        </el-table>
                        <!--分页-->
                        <el-pagination layout="prev, pager, next"
                                       style="margin: 10px auto;text-align: center"
                                       :current-page="currentPage"
                                       :page-size="pageSize"
                                       :total="total"
                                       @current-change="searchProvinceAdmit">
                        </el-pagination>
                    </div>
                </div>

<!--                <div class="provinceAdmitCount" v-show="provinceAdmitResultList.length != 0">-->
<!--                    <el-divider content-position="left"><i class="el-icon-data-analysis"></i> 各录取分数线统计</el-divider>-->
<!--                </div>-->
            </div>
            <el-divider content-position="center" >&copy; 2020 </el-divider>

        </div>
    </div>
</template>

<script>
    import ProvinceAdmitHeader from "../components/ProvinceAdmitHeader";
    import province_admit from "../api/province_admit";
    import option from "../echarts/option";
    export default {
        name: "ProvinceAdmit",
        components:{ProvinceAdmitHeader},
        data(){
            return{
                provinceConditionFrom:{province:null,examType:null,year:null},
                provinces:["全部","北京","天津","河北","河南","山东","山西","陕西","内蒙古","辽宁","吉林","黑龙江","上海","江苏","安徽","江西","湖北","湖南",
                    "重庆","四川","贵州","云南", "广东","广西","福建","甘肃","宁夏","新疆","西藏","海南","浙江","青海"],
                provinceAdmitResultList:[],
                //分页数据
                currentPage: 1,
                total: 0,
                pageSize: 10,
                // provinceAdmitLine:option.provinceAdmitLine

            }
        },
        methods:{
            //查询分数线
            searchProvinceAdmit(currentPage){
                //验证
                if(this.provinceConditionFrom.province ===null ||this.provinceConditionFrom.examType === null ||
                    this.provinceConditionFrom.year === null){
                    //验证表单数据
                    this.$notify.warning({title: '信息输入不完整', message: '请输入完整的信息，再点击查询按钮', duration: 2500});
                }else{
                    //请求
                    console.log(this.provinceConditionFrom)
                    let vm = this
                    province_admit.getProvinceAdmit(this.provinceConditionFrom,currentPage).then(function (response) {
                        // console.log(response)
                        if (response.data.code === 200){
                            console.log(response.data.data)
                            var data = response.data.data
                            vm.provinceAdmitResultList = data.records
                            vm.currentPage = data.current
                            vm.total = data.total
                            vm.pageSize = data.size

                            vm.$notify.success({title: '已成功查询', message: '请查看查询结果列表', duration: 2500});

                        }else{
                            if (response.data.code === 201){
                                vm.provinceAdmitResultList = []
                                vm.$notify.info({title: '查询结果为空！', message: '请重查询', duration: 2500});
                            }

                        }
                    })
                }
            },
            //统计
        }

    }
</script>

<style scoped>
    .el-divider__text{
        color: #5dabf7;
    }
    .province{
        border: rgb(241, 252, 252) solid 2px;
        margin: 50px 100px;
    }
    .provinceCondition,.provinceAdmitList,.provinceAdmitCount{
        /*height: 50px;*/
        margin: 80px;
    }
    .provinceAdmitResultList{
        padding: 0 100px 0 100px;
    }
    .provinceConditionFrom{
        margin: 80px 50px;
    }
    span,p{
        font-family: 仿宋;
        font-size: 18px;
        color: #292b2b;
        margin: 10px;
    }
    .el-button{
        font-family: 华文楷体;
        font-size: 22px;
        color: #555b5c;
        margin: 50px 200px !important;
        float: right;
        border: #5dabf7 solid 1px;
    }
    .el-button:hover{
        font-size: 24px;
        color: #5dabf7;
    }
</style>